<script setup lang="ts">
import type { TableList } from '../types'
import TableLists from '@/components/TableLists/TableLists.vue'
import { uuid } from '@/utils'
import { ElLink } from 'element-plus'
import IndicatorDataCurveModal from '@/components/IndicatorDataCurveModal/IndicatorDataCurveModal.vue'

import type { TableColumn } from '@/types'

import mitt from '@/bus'
import { CONTAIN_SUB } from '@/enum/modules/public'

const emits = defineEmits<{
  (e: 'pauseTimer'): void
  (e: 'playTimer'): void
}>()
const keyword = ref('')
const [current, setCurrent] = useState<any>(null)
const loading = ref(false)
const lists = ref<TableList[]>([])
const indicatorNumber = ref<string>()
const indicatorDataCurveModalRef = ref<InstanceType<typeof IndicatorDataCurveModal>>()
const columns: TableColumn<TableList>[] = [
  { key: uuid(), label: '指标名称', prop: 'indicatorName' },
  {
    key: uuid(),
    label: '测点点位号',
    prop: 'indicatorCode',
    render: ({ row }) => h('code', row.indicatorCode),
  },
  { key: uuid(), label: '数据时间', prop: 'dataTime' },
  {
    key: uuid(),
    label: '数据值',
    prop: 'val',
    render: ({ row }) => h(
      ElLink,
      {
        type: 'primary',
        onClick: async () => {
          indicatorNumber.value = row.indicatorNumber

          // 关闭定时刷新
          emits('pauseTimer')

          await nextTick()
          indicatorDataCurveModalRef.value?.showModal()
        },
      },
      () => h('code', row.val),
    ),
  },
]
const containSub = ref<CONTAIN_SUB>(CONTAIN_SUB.NO_SUB)

const filterLists = computed(() => {
  return lists.value.filter(
    v =>
      v.indicatorName.includes(keyword.value)
      || keyword.value.length === 0,
  )
})

async function getLists(pointId: number) {
  loading.value = true
  try {
    const { data }
      = await dataManagementApi.loadIndicatorActualTimePage(
        pointId,
        unref(containSub),
      )
    if (data) {
      lists.value = data
    }
    else {
      lists.value = []
    }
  }
  finally {
    loading.value = false
  }
}

function mittHandler(node: any) {
  if (node.id) {
    setCurrent(node)
    getLists(node.id)
  }
}

function clickSearch() {
  getLists(unref(current)?.id)
}

onBeforeUnmount(() => {
  mitt.off(
    'realtime-indicator-data:select-node',
    mittHandler,
  )
})

onMounted(() => {
  // 不直接调用，在定时器中触发
  // getLists(0)
  mitt.on(
    'realtime-indicator-data:select-node',
    mittHandler,
  )
})
</script>

<template>
  <div class="view-manage relative" style="gap: 0">
    <TableLists
      :loading="loading"
      :lists="filterLists"
      :columns="columns"
      :show-toolbox="true"
    >
      <template #actions>
        <ElForm inline>
          <ElFormItem>
            <ContainSubRadio v-model="containSub" />
          </ElFormItem>
          <ElFormItem
            label="指标名称"
          >
            <ElInput
              v-model="keyword"
              style="width: 250px"
              class="free"
              clearable
              placeholder="关键字"
            />
          </ElFormItem>
          <ElFormItem>
            <SearchButton @click="clickSearch" />
          </ElFormItem>
        </ElForm>
      </template>
    </TableLists>

    <!-- 指标数据折线图 -->
    <IndicatorDataCurveModal
      v-if="indicatorNumber"
      ref="indicatorDataCurveModalRef"
      :indicator-number="indicatorNumber"
      @close="emits('playTimer')"
    />
  </div>
</template>
